<template>
  <div class="preset-fieids">
    <div v-for="(item, index) in fieldListGroup" :key="index" class="_mb-24">
      <div class="_pt-4 _pb-4 title">
        <div>
          <span class="fz-20 fw-7"> {{ item.name }}</span>
        </div>
        <div class="fz-14 _mt-8" style="color: #86909C;">
          <span v-if="item.id === 1">用户填写后，如果用户本项资料为空，将会自动补充到用户资料中</span>
          <span v-else>仅作为活动信息收集</span>
        </div>
      </div>

      <div class="_mt-16 fieids">
        <div
          v-for="(childrenItem, childrenIndex) in item.children"
          :key="childrenIndex"
          :style="{
            background: fieldLibraryIds.includes(childrenItem.dataType) ? '#165DFF' : '#f2f3f5',
            color: fieldLibraryIds.includes(childrenItem.dataType) ? '#FFF' : '#4E5969'
          }"
          @click="handleClick(childrenItem)"
        >
          {{ childrenItem.name }}
        </div>
      </div>
    </div>
    <AddFieldForm ref="addFieldForm" @editField="editField" />
  </div>
</template>
<script>
import { getCustomUserInfoFieldLibrary } from '@/api/activity/activity'
import AddFieldForm from '../AddFieldForm/index.vue'
export default {
  components: {
    AddFieldForm
  },

  data() {
    return {
      fieldLibraryIds: [],
      fieldListGroup: []
    }
  },
  mounted() {
    this.queryCustomUserInfoFieldLibrary()
  },
  methods: {
    async queryCustomUserInfoFieldLibrary() {
      const res = await getCustomUserInfoFieldLibrary()
      this.fieldListGroup = res.data
    },
    editField(form) {
      form.dataType && this.fieldLibraryIds.push(form.dataType)
      this.$emit('add', form)
    },
    handleClick(childrenItem) {
      if (this.fieldLibraryIds.includes(childrenItem.dataType)) {
        this.fieldLibraryIds = this.fieldLibraryIds.filter(id => id !== childrenItem.dataType)
        this.$emit('del', childrenItem.dataType)
      } else {
        if (childrenItem.customFormItemAnswerList) {
          childrenItem.customFormItemAnswerList.forEach(item => {
            item.customFormItemId = undefined
            item.customFromId = undefined
            item.id = undefined
          })
        }

        let obj = {
          type: 'edit',
          preset: true,
          data: {
            ...childrenItem,
            showName: childrenItem.showName || childrenItem.name,
            customFormItemAnswerDtoList:
              childrenItem.customFormItemAnswerList || childrenItem.customFormItemAnswerDtoList || []
          }
        }

        this.$refs.addFieldForm.show(obj)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.preset-fieids {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #c9cdd4;
  background: #fff;
  .title {
    border-bottom: 1px solid #e5e6eb;
  }
  .fieids {
    display: flex;
    flex-wrap: wrap;
    > div {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
      width: 152px;
      height: 36px;
      margin-right: 16px;
      margin-bottom: 16px;
    }
    > div:last-child {
      margin-right: 0;
      margin-bottom: 0;
    }
    > div:hover {
      border: 1px solid #165dff;
    }
  }
}
</style>
